vue入门小案例

[TOC]

一、hello world

<div id="app">{{content}}</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            content: 'hello world'
        }
    });
    setTimeout(function() {
        //不用关心dom的操作
        app.$data.content = 'bye world';
    }, 2000);
</script>

二、todolist提交

<div id="app">
    <input type="text" v-model="inputValue" />
    <button @click="handleBtnClick">提交</button>
    <ul>
        <li v-for="item in list">{{item}}</li>
    </ul>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            list: [],
            inputValue: ''
        },
        methods: {
            handleBtnClick: function() {
                this.list.push(this.inputValue);
                this.inputValue = '';
            }
        }
    });
</script>

2.1 todolist提交(组件化）

<div id="root">
    <input type="text" v-model="inputValue" />
    <button @click="handleBtnClick">提交</button>
    <ul>
        <todo-item v-bind:content="item" v-for="item in list"></todo-item>
    </ul>
</div>

<script>
    //创建全局组件
    // Vue.component("TodoItem", {
    //     props: ['content'],
    //     template: "<li>{{this.content}}</li>"
    // });

    //局部组件
    var TodoItem = {
        // prop是在组件上注册的一些自定义特性
        props: ['content'],
        template: "<li>{{this.content}}</li>"
    }
    var app = new Vue({
        el: '#root',
        components: {
            TodoItem: TodoItem
        },
        data: {
            list: [],
            inputValue: ''
        },
        methods: {
            handleBtnClick: function() {
                this.list.push(this.inputValue);
                this.inputValue = '';
            }
        }
    });
</script>

2.2 todolist删除(组件间传值）

<div id="root">
    <input type="text" v-model="inputValue" />
    <button @click="handleBtnClick">提交</button>
    <ul>
        <todo-item :content="item" :index="index" v-for="(item,index) in list" @delete="handleItemDelete"></todo-item>
    </ul>
</div>

<script>
    var TodoItem = {
        props: ['content', 'index'],
        template: "<li @click='handleItemClick'>{{this.content}}</li>",
        methods: {
            handleItemClick: function() {
                //$emit向外触发事件
                this.$emit("delete", this.index);
            }
        }
    }
    var app = new Vue({
        el: "#root",
        components: {
            TodoItem: TodoItem
        },
        data: {
            list: [],
            inputValue: ""
        },
        methods: {
            handleBtnClick: function() {
                this.list.push(this.inputValue);
                this.inputValue = "";
            },
            handleItemDelete: function(index) {
                this.list.splice(index, 1);
            }
        }
    });
</script>

三、计算属性、方法、监听器

<!-- 计算方法的写法 -->
<!-- <div id="app">{{fullname()}}{{age}}</div> -->

<!-- 计算属性、监听器的写法 -->
<div id="app">
    {{fullname}} {{age}}
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstname: "Lin",
            lastname: "Xiaoxiao",
            //监听器时使用
            //fullname: "Lin Xiaoxiao",
            age: '21'
        },
        //计算方法(没有缓存机制)
        // methods: {
        //     fullname: function() {
        //         console.log('calculation');
        //         return this.firstname + ' ' + this.lastname;
        //     }
        // },

        //监听器(有缓存机制)
        // watch: {
        //     firstname: function() {
        //         console.log('calculation');
        //         this.fullname = this.firstname + ' ' + this.lastname;
        //     },
        //     lastname: function() {
        //         console.log('calculation');
        //         this.fullname = this.firstname + ' ' + this.lastname;
        //     }
        // },

        //计算属性(有缓存机制)
        //首选且性能好
        computed: {
            fullname: function() {
                console.log('calculation');
                return this.firstname + ' ' + this.lastname;
            }
        }
    })
</script>

3.1 firstname、lastname与fullname的相互影响

<div id="app">
    {{fullname}}
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstname: "Lin",
            lastname: "Xiaoxiao",
        },
        computed: {
            fullname: {
                get: function() {
                    return this.firstname + " " + this.lastname;
                },
                set: function(value) {
                    var arr = value.split(" ");
                    this.firstname = arr[0];
                    this.lastname = arr[1];
                }
            }
        }
    });
</script>